<template>
  <div class="pdf-container" title="右键打印本页为pdf">
    <p style="text-align: center;"><code>右键打印为pdf格式文件</code></p>
    <div class="page">
      <h4>这是pdf打印模板</h4>
      <img src="../../assets/indexhot.png" />
      <p>这是一段图片描述文本</p>
      <p>****************************************************************************  </p>
      <img src="../../assets/qiao.jpg" height="300" width="300" />
      <p>这是一段图片描述文本</p>
      <p>****************************************************************************  </p>
      <img src="../../assets/indexhot.png" />
      <p>这是一段图片描述文本</p>
      <p>****************************************************************************  </p>
      <img src="../../assets/qiao.jpg" height="300" width="300" />
      <p>这是一段图片描述文本</p>
      <p>****************************************************************************  </p>
    </div>
    <el-button class="btn" type="primary" style="border: none;padding: 0;"></el-button>
  </div>
</template>

<script>
import html2PDF from 'jspdf-html2canvas'
export default {
  mounted() {
    const pdfC = document.querySelector('.pdf-container')
    const page = document.querySelector('.page')
    const btn = document.querySelector('.btn')
    pdfC.addEventListener('contextmenu', function(e) {
      e.stopPropagation()
      e.preventDefault()
      const print = confirm('是否打印本页')
      if(print) {
        btn.click()
      }
    })
    btn.addEventListener('click', function() {
      html2PDF(page, {
        jsPDF: {
          format: 'a4'
        },
        imageType: 'image/jpeg',
        output: './pdf/genderate.pdf'
      })
    })
  }
}
</script>

<style scoped>
  .page {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
</style>
